<template>
  <el-row :gutter="10" v-loading="loading">
    <el-col>
      <ContentWrap>
        <div style="display: flex">
          <span style="font-size: 20px; color: #1d2129; font-weight: 700">当前地震： {{ tableDatatitle }}</span>
          <el-icon size="30" color="#3560F6" style="margin-left: 10px">
            <Switch @click="backBut" />
          </el-icon>
        </div>
      </ContentWrap>
    </el-col>
    <el-col :span="3" :xs="24">
      <ContentWrap :styleParams="{ padding: '10px', height: 'calc(100vh - 210px)', marginBottom: '0px' }">
        <div style="width: 100%; font-size: 14px; color: #333">
          <div class="liList" v-for="(item, index) in listTitle" :class="{ tabsStyle: tabs1 === index }" :key="index"
            @click="tabs(item, index)">{{ item }}
          </div>
        </div>
      </ContentWrap>
    </el-col>

    <el-col :span="21" :xs="24">
      <ContentWrap v-if="activeTab === '在线地图'"
        :styleParams="{ minHeight: 'calc(100vh - 230px)', padding: '20px', marginBottom: '0px' }">
        <div v-if="earthakeList.length > 0">
          <div class="flex items-center justify-between">
            <el-select v-model="stateName" clearable placeholder="影响场" style="width: 140px" size="large"
              @change="changeField">
              <el-option v-for="item in listName" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <div class="flex items-center">
              <span style="font-size: 18px; font-weight: 600">当前影响场：{{ currEarthake.value }}</span>
              <el-dropdown @command="handleCommand">
                <el-icon size="20" color="#409efc" style="margin-left: 10px">
                  <Switch />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="item in earthakeList" :command="item">{{
                      item.value
                      }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <el-button type="primary" @click="createProdct">计算并生成产品</el-button>
          </div>
        </div>
        <div style="width: 100%; height: calc(100vh - 290px); border: 1px solid #fff; margin-top: 20px">
          <div id="map" ref="mapElement"></div>
        </div>
        <el-dialog title="修正" v-model="amendVisible" width="60%" :center="true" custom-class="custom-dialog">
          <el-form v-model="formAmend" label-width="80px">
            <el-row v-for="(item, index) in formAmend">
              <template v-if="category=='3'">
                <el-col :span="12" v-show="index==0">
                  <el-form-item :prop="`formAmend.${index}.ruptureScale`" label="破裂尺度">
                    <el-input-number controls-position="right" style="width: 100%" v-model="item.ruptureScale" placeholder="请输入破裂尺度"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-show="index==0">
                  <el-form-item :prop="`formAmend.${index}.angle`" label="角度">
                    <el-input-number class="left-aligned" controls-position="right" style="width: 100%" :disabled="index != 0"
                      v-model="item.angle" placeholder="请输入角度"></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
              <template v-else>
              <el-col :span="12">
                <el-form-item :prop="`formAmend.${index}.dzIntensity`" label="烈度">
                  <el-input v-model="item.dzIntensity" placeholder="请输入烈度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :prop="`formAmend.${index}.angle`" label="角度">
                  <el-input-number class="left-aligned" controls-position="right" style="width: 100%" :disabled="index != 0"
                    v-model="item.angle" placeholder="请输入角度"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :prop="`formAmend.${index}.longAxis`" label="长轴">
                  <el-input-number controls-position="right" style="width: 100%" v-model="item.longAxis"
                    placeholder="请输入长轴"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :prop="`formAmend.${index}.shortAxis`" label="短轴">
                  <el-input-number controls-position="right" style="width: 100%" v-model="item.shortAxis"
                    placeholder="请输入短轴"></el-input-number>
                </el-form-item>
              </el-col>
              </template>
              <el-divider v-if="category!='3'"/>
            </el-row>
          </el-form>
          <template #footer>
            <el-button type="primary" @click="saveAmend">确 定</el-button>
            <el-button @click="amendVisible = false">取 消</el-button>
          </template>
        </el-dialog>
        <el-dialog title="导入影响场" v-model="importVisible" width="40%" :center="true" custom-class="custom-dialog">
          <el-form ref="importFileRef" :model="formFile" :rules="rules" label-width="120px">
            <el-form-item label="文件类型" prop="type">
              <el-radio-group v-model="formFile.type" @change="changeType">
                <el-radio value="1">shp文件</el-radio>
                <el-radio value="2">geojson</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="影响场文件" prop="fileIds">
              <UploadFile :downloadFileUrl="null" v-model="formFile.filelist" @removeFile="removeFile"
                @uploadSuccess="uploadSuccess" @uploadError="uploadError"
                :file-type="formFile.type == '1' ? ['zip'] : ['json']" :describe="
                  formFile.type == '2'
                    ? '需上传json文件'
                    : '需上传shp文件压缩包（zip格式）（至少包含dbf、prj、shp、shx、cpg五个文件，且文件名称需相同）'
                " :limit="1">
              </UploadFile>
            </el-form-item>
            <el-form-item label="烈度值字段" prop="intensity" v-if="formFile.type == '1'">
              <el-input v-model="formFile.intensity" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button type="primary" @click="saveImport">确 定</el-button>
            <el-button @click="importVisible = false">取 消</el-button>
          </template>
        </el-dialog>
      </ContentWrap>

      <ContentWrap v-if="activeTab === '震区概况'">
        <table class="custom-table">
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">地震名称</td>
            </tr>
            <tr v-for="row in allSchemas.earthquake" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">影响场</td>
            </tr>
            <tr v-for="row in allSchemas.Influence" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">一张图</td>
            </tr>
            <tr v-for="row in allSchemas.degreeZone" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">应急响应等级</td>
            </tr>
            <tr v-for="row in allSchemas.resLevel" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">专题图</td>
            </tr>
            <tr v-for="row in allSchemas.earthquakeOverview" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">震区概况</td>
            </tr>
            <tr v-for="row in allSchemas.regionOverview" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ namelistData[row.field] }}</td>
            </tr>
          </tbody>
        </table>
      </ContentWrap>

      <ContentWrap v-if="activeTab === '辅助决策'">
        <table class="custom-table">
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">应急视频调度建议</td>
            </tr>
            <tr v-for="row in assistant.video" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ assistantlistData.emergencyVideo }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">灾害快速评估结果</td>
            </tr>
            <tr v-for="row in assistant.assessment" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ assistantlistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">重点目标受影响情况评估</td>
            </tr>
            <tr v-for="row in assistantitem.effectList" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ assistantlistDataitem[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">交通线路受影响情况评估</td>
            </tr>
            <tr v-for="row in assistantitem.effectList" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ trafficlistDataitem[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">桥梁和隧道受影响情况评估</td>
            </tr>
            <tr v-for="row in assistantitem.bridge" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ keynotelistDataitem[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">次生灾害危险性评估</td>
            </tr>
            <tr v-for="row in assistant.secondary" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ assistantlistData[row.field] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td class="center-cell" colspan="2">重点救援区域建议</td>
            </tr>
            <tr v-for="row in assistant.keynote" :key="row.field">
              <td class="col-30">{{ row.label }}</td>
              <td class="col-70">{{ assistantlistData[row.field] }}</td>
            </tr>
          </tbody>
        </table>
      </ContentWrap>

      <ContentWrap v-if="activeTab === '地震文件'">
        <div>
          <span>类型:</span>
          <el-button-group class="ml-4">
            <el-button v-for="(item, index) in buttonList" :key="index" :size="item.size"
              :type="item.isActive ? 'primary' : 'default'" @click="handleButtonClick(index)">
              {{ item.label }}
            </el-button>
          </el-button-group>
        </div>
        <div style="margin-top: 20px; display: flex; justify-content: space-between">
          <el-button type="primary" @click="downloadList">批量下载</el-button>
          <el-button type="primary" @click="productShow" style="margin-right: 30px">产品展示</el-button>
        </div>
        <el-dialog v-model="centerDialogVisible" width="50%" :center="true" custom-class="custom-dialog">
          <el-carousel :interval="5000" arrow="always" height="600px">
            <el-carousel-item v-for="(item, index) in imgList" :key="index">
              <iframe :src="item" width="100%" height="100%"></iframe>
            </el-carousel-item>
          </el-carousel>
        </el-dialog>

        <div style="margin-top: 30px">
          <el-table :data="tableData" show-header @selection-change="handleSelectionChange" stripe
            header-cell-class-name="custom-header">
            <el-table-column type="selection" />
            <el-table-column prop="name" label="名称" width="350">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <img :src="scope.row.imgType" alt="" />
                  <span style="margin-left: 10px;color: #3560F6;" @click="Preview(scope.row)">{{ scope.row.name
                    }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" align="center" />
            <el-table-column prop="createdAt" label="生成时间" align="center" />
            <el-table-column prop="createdUser" label="产出单位" align="center" />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" link @click="downloadFile(scope.row)"> 下载 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 30px">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </ContentWrap>

      <ContentWrap v-if="activeTab === '应急服务信息'">
        <EmergencyInfo :earthQuakeId="id" :earthQuakeType="earthquakeType" />
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue'
import * as earthquakeServerApi from '@/api/earthquake/earthquakeServer'
import EmergencyInfo from './EmergencyInfo.vue'
import { useRoute, useRouter } from 'vue-router'
import * as datarApi from '@/api/file'
import download from '@/utils/download'
import moment from 'moment'
import { initMap, loadEarthQuakeYXC ,addYXCLayer} from './gis/index.js'
import UploadFile from '@/views/responseLevel/populationDensity/create/UploadFileReport.vue'
import { radioProps } from 'element-plus'
const route = useRoute()
const router = useRouter()
const message = useMessage() // 消息弹窗
const listTitle = ref([
  '在线地图',
  '震区概况',
  '辅助决策',
  '地震文件',
  '数据可视化',
  '专题图',
  '三维大屏',
  '应急服务信息'
])
const activeTab = ref('在线地图')
const listName = ref([
  { label: '重新生成', value: '1' },
  { label: '修正', value: '2' },
  { label: '导入', value: '3' },
  { label: '导出shp文件', value: '4' },
  { label: '导出geojson文件', value: '5' }
])
// 下拉选中
const stateName = ref('')
const tabs1 = ref(0)
const tabPosition = ref('left')
const centerDialogVisible = ref(false)
// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const disabled = ref(false)
const background = ref(false)
const total = ref(100)
const imgList = ref([])
const routeData = ref()
const allSchemas = ref({
  earthquake: [
    { label: '地震名称', field: 'earthQuakeName' },
    { label: '地震长名称', field: 'earthQuakeLongName' },
    { label: '发震时刻', field: 'createTime' },
    { label: '震级', field: 'earthquakeMagnitude' },
    { label: '经度', field: 'longitude' },
    { label: '纬度', field: 'latitude' },
    { label: '震源深度', field: 'depth' },
    { label: '地点', field: 'referenceLocation' },
    { label: '经度描述', field: 'longitudeDescribe' },
    { label: '纬度描述', field: 'latitudeDescribe' },
    { label: '地震类型', field: 'earthquakeType' },
    { label: '发震日期', field: 'earthquakeTime' }
  ],
  Influence: [
    { label: '最大烈度', field: 'maxIntensity' },
    { label: '极灾区', field: 'maxDisasterArea' },
    { label: '受灾范围', field: 'disasterScope' },
    { label: '区县个数', field: 'disasterScopeSize' }
  ],
  degreeZone: [
    { label: '6度区', field: 'effect6' },
    { label: '7度区', field: 'effect7' },
    { label: '8度区', field: 'effect8' }
  ],
  aPicture: [
    { label: '泥石流统计', field: 'debrisFlow' },
    { label: '滑坡统计', field: 'landslide' },
    { label: '崩塌统计', field: 'collapse' },
    { label: '发电厂统计', field: 'powerPlant' },
    { label: '电站统计', field: 'powerStation' },
    { label: '机场统计', field: 'airport' },
    { label: '危险源统计', field: 'dangerous' },
    { label: '避难场所统计', field: 'shelter' },
    { label: '医院统计', field: 'hospital' },
    { label: '学校统计', field: 'school' },
    { label: '历史地震统计', field: 'historyStatistics' },
    { label: '村统计', field: 'village' },
    { label: '乡镇统计', field: 'town' },
    { label: '县统计', field: 'county' }
  ],
  resLevel: [
    { label: '响应等级', field: 'grade' },
    { label: '应急响应级别', field: 'gradeLevel' },
    { label: '应急响应级别描述', field: 'gradeDesc' }
  ],
  earthquakeOverview: [
    { label: '交通图件说明', field: 'trafficMapDesc' },
    { label: '历史成灾地震图件说明', field: 'historicalDisasterMapDesc' },
    { label: '历史地震图件说明', field: 'historicalMapDesc' },
    { label: '影响范围图件说明', field: 'scopeMapDesc' },
    { label: '基本信息图件说明', field: 'basicMapDesc' }
  ],
  regionOverview: [
    { label: '2.5公里村个数', field: 'villageCount1' },
    { label: '10公里村个数', field: 'villageCount2' },
    { label: '周边人口经济描述', field: 'countyPopGdpDesc' },
    { label: '震区统计', field: 'impactCount' },
    { label: '震区影响范围', field: 'impactArea' },
    { label: '距离最近交通线', field: 'trafficLine' },
    { label: '距离最近机场', field: 'airportDistance' },
    { label: '县驻地震中距', field: 'countyDistance' },
    { label: '省驻地震中距', field: 'provinceDistance' },
    { label: '中心站距离描述', field: 'centralDistance' },
    { label: '中心站震中距', field: 'centralDistance1' },
    { label: '区域分布描述', field: 'regionalDistance' },
    { label: '地震影响范围', field: 'quakeArea' },
    { label: '设防区描述', field: 'resultData2' },
    { label: '震中设防', field: 'defense' },
    { label: '震中乡镇', field: 'quakeTown' },
    { label: '乡镇、村个数', field: 'townVillage' },
    { label: '海拔描述', field: 'elevation' },
    { label: '人口描述', field: 'population' },
    { label: '周边距离描述', field: 'distance2' },
    { label: '震区距离描述', field: 'distance1' },
    { label: '历史地震说明', field: 'history' },
    { label: '历史地震描述', field: 'historyDesc' },
    { label: '历史成灾地震描述', field: 'historyDisaster' },
    { label: '震中10公里平均海拔', field: 'resultData1' },
    { label: '人口密度描述', field: 'populationDensity' }
  ]
})
const namelistData = ref({
  earthQuakeName: '',
  earthQuakeLongName: '',
  createTime: '',
  earthquakeMagnitude: '',
  longitude: '',
  latitude: '',
  depth: '',
  referenceLocation: '',
  longitudeDescribe: '',
  latitudeDescribe: '',
  earthquakeType: '',
  earthquakeTime: '',
  maxIntensity: '',
  maxDisasterArea: '',
  disasterScope: '',
  disasterScopeSize: '',
  // zone6: '',
  debrisFlow: '',
  landslide: '',
  collapse: '',
  powerPlant: '',
  powerStation: '',
  airport: '',
  dangerous: '',
  shelter: '',
  hospital: '',
  school: '',
  historyStatistics: '',
  village: '',
  town: '',
  county: '',
  grade: '',
  gradeLevel: '',
  gradeDesc: '',
  trafficMapDesc: '',
  historicalDisasterMapDesc: '',
  historicalMapDesc: '',
  scopeMapDesc: '',
  villageCount1: '',
  villageCount2: '',
  countyPopGdpDesc: '',
  impactCount: '',
  impactArea: '',
  trafficLine: '',
  airportDistance: '',
  countyDistance: '',
  provinceDistance: '',
  centralDistance: '',
  centralDistance1: '',
  regionalDistance: '',
  quakeArea: '',
  resultData2: '',
  defense: '',
  quakeTown: '',
  townVillage: '',
  elevation: '',
  population: '',
  distance2: '',
  distance1: '',
  history: '',
  historyDesc: '',
  historyDisaster: '',
  resultData1: '',
  populationDensity: ''
})
// 辅助决策
const assistant = ref({
  video: [{ label: '应急视频调度建议', field: 'emergencyVideo' }],
  assessment: [
    { label: '灾害快速评估结果', field: 'disasterAssessment' },
    { label: '人员伤亡模型1', field: 'casualtyModel1' },
    { label: '人员伤亡模型2', field: 'casualtyModel2' },
    { label: '人员伤亡模型3', field: 'casualtyModel3' },
    { label: '人员伤亡模型4', field: 'casualtyModel4' },
    { label: '人员伤亡模型5', field: 'casualtyModel5' },
    { label: '经济损失', field: 'economicLoss' }
  ],
  secondary: [{ label: '次生灾害危险性评估', field: 'secondaryAssessment' }],
  keynote: [{ label: '重点救援区域建议', field: 'keyRescueAreas' }]
})
const assistantitem = ref({
  effectList: [
    { label: '10度区', field: 'effect10' },
    { label: '9度区', field: 'effect9' },
    { label: '8度区', field: 'effect8' },
    { label: '7度区', field: 'effect7' },
    { label: '6度区', field: 'effect6' }
  ],
  traffic: [
    { label: '10度区', field: 'effect10' },
    { label: '9度区', field: 'effect9' },
    { label: '8度区', field: 'effect8' },
    { label: '7度区', field: 'effect7' },
    { label: '6度区', field: 'effect6' }
  ],
  bridge: [
    { label: '10度区', field: 'effect10' },
    { label: '9度区', field: 'effect9' },
    { label: '8度区', field: 'effect8' }
  ]
})

const assistantlistData = ref({
  emergencyVideo: '',
  disasterAssessment: '',
  casualtyModel1: '',
  casualtyModel2: '',
  casualtyModel3: '',
  casualtyModel4: '',
  casualtyModel5: '',
  economicLoss: '',
  secondaryAssessment: '',
  keyRescueAreas: ''
})
// 重点目标受影响情况评估
const assistantlistDataitem = ref({
  effect10: '',
  effect9: '',
  effect8: '',
  effect7: '',
  effect6: ''
})
// 交通线路受影响情况评估
const trafficlistDataitem = ref({
  effect10: '',
  effect9: '',
  effect8: '',
  effect7: '',
  effect6: ''
})
// 桥梁和隧道受影响情况评估
const keynotelistDataitem = ref({
  effect10: '',
  effect9: '',
  effect8: ''
})
// 按钮
const buttonList = ref([
  { label: '全部', size: 'large', isActive: true },
  { label: '报告', size: 'large', isActive: false },
  { label: '图件', size: 'large', isActive: false },
  { label: '其他', size: 'large', isActive: false }
])
// 渲染名称里的图标
const iconList = ref([
  { type: 'doc', path: '/static/iconVsg/DOC.png' },
  { type: 'docx', path: '/static/iconVsg/DOCX.png' },
  { type: 'jpg', path: '/static/iconVsg/JPG.png' },
  { type: 'pdf', path: '/static/iconVsg/PDF.png' },
  { type: 'png', path: '/static/iconVsg/PNG.png' },
  { type: 'ppt', path: '/static/iconVsg/PPT.png' },
  { type: 'pptx', path: '/static/iconVsg/PPTX.png' },
  { type: 'zip', path: '/static/iconVsg/ZIP.png' }
])
const getTypeImg = (type) => {
  const icon = iconList.value.find((item) => item.type === type)
  return icon ? icon.path : null
}
const handleCommand = (command) => {
  currEarthake.value = command
   loadXYC()
}
const earthquakeType = route.query.earthquakeType
const id = String(route.query.id)
// 在线地图 影响场切换
const changeField = (val) => {
  if (val) {
    switch (val) {
      case '1':
        reCreate()
        break
      case '2':
        correctFunDetail()
        break
      case '3':
        openImport()
        break
      case '4':
        exportData(1)
        break
      case '5':
        exportData(2)
        break
      default:
        break
    }
  }
}
// 修正
const amendVisible = ref(false)
const formAmend = ref([])
const category = ref() //1圆 2椭圆 3线圆
watch(
  () => formAmend.value[0]?.angle,
  (newVal) => {
    if (newVal !== undefined) {
      formAmend.value.forEach((item, index) => {
        if (index !== 0) {
          item.angle = newVal;
        }
      });
    }
  }
);
watch(
  () => formAmend.value[0]?.ruptureScale,
  (newVal) => {
    if (newVal !== undefined) {
      formAmend.value.forEach((item, index) => {
          item.ruptureScale = newVal;
      });
    }
  }
);
const correctFunDetail = () => {
  loading.value = true
  earthquakeServerApi
    .correctDetail({ earthQuakeId: id, influenceVersion: currEarthake.value.version })
    .then((res) => {
      loading.value = false
      amendVisible.value = true
      formAmend.value = res
      category.value = res[0].category
    })
    .catch((err) => {
      loading.value = false
    })
}
// 修正保存
const saveAmend = () => {
  loading.value = true
  const query = {
    influence: formAmend.value,
    flag: earthquakeType
  }
  earthquakeServerApi
    .correctInfluence(query)
    .then((res) => {
      loading.value = false
      amendVisible.value = false
      message.success('修正成功')
      stateName.value = ''
      getcurrentEarthInfluence()
    })
    .catch((err) => {
      loading.value = false
    })
}
// 重新生成
const loading = ref(false)
const reCreate = () => {
  loading.value = true
  earthquakeServerApi
    .renewSaveInfluence({ type: earthquakeType, earthQuakeId: id })
    .then((res) => {
      getcurrentEarthInfluence()
      stateName.value = ''
      message.success('重新生成成功')
    })
    .catch((err) => {
      loading.value = false
    })
}
// 导入
const importVisible = ref(false)
const filelist = ref([])
const rules = {
  type: [{ required: true, message: '请选择导入文件类型', trigger: 'change' }],
  fileIds: [{ required: true, message: '请上传文件', trigger: 'change' }],
  intensity: [{ required: true, message: '请输入烈度字段', trigger: 'blur' }]
}
const formFile = ref({
  type: '1',
  filelist: [],
  intensity: '',
  fileIds: '',
  flag: earthquakeType,
  earthQuakeId: id
})
const importFileRef = ref()
const openImport = () => {
  importVisible.value = true
  formFile.value = {
    type: '1',
    filelist: [],
    intensity: '',
    fileIds: '',
    flag: earthquakeType,
    earthQuakeId: id
  }
  importFileRef.value?.resetFields()
}
const changeType = (val) => {
  formFile.value.fileIds = ''
  formFile.value.filelist = []
}
const uploadSuccess = (val) => {
  formFile.value.fileIds = val.fileList[0].attachId
  console.log(val.fileList)
  console.log(formFile.value.fileIds, 'formFile')
}
const uploadError = () => {
  formFile.value.fileIds = ''
}
const removeFile = (val) => {
  formFile.value.fileIds = ''
}
const saveImport = () => {
  // 导入
  if (!importFileRef) return
  importFileRef.value.validate((valid, fields) => {
    if (valid) {
      earthquakeServerApi.importInfluence(formFile.value).then((res) => {
        importVisible.value = false
        getcurrentEarthInfluence()
        message.success('导入成功')
        stateName.value = ''
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
watch(
  [importVisible, amendVisible],
  [
    ([val], [val2]) => {
      if (!val || !val2) {
        stateName.value = ''
      } else {
        stateName.value = ''
      }
    }
  ]
)

// 导出shp\geojson
const exportData = (type) => {
  const query = {
    earthId: id, //地震id
    flag: earthquakeType, //1--正式地震  2--测试地震  3--演练地震  4--自动地震, 默认是2 测试地震
    version: currEarthake.value.version, //影响场版本
    type: type //1 导出为shp文件  2geojson
  }
  earthquakeServerApi.exportCurrentEarthInfluence(query).then((res) => {
    stateName.value = ''
    if (type == 1) {
      download.zip(res, `${tableDatatitle.value}.zip`)
    } else {
      // download.json(JSON.stringify(res), '影响场数据.json')
      download.json(res, `${tableDatatitle.value}.json`)
    }
  })
}
// 获取影响场列表
const earthakeList = ref([])
const currEarthake = ref({})
const getcurrentEarthInfluence = () => {
  loading.value = true
  earthquakeServerApi
    .currentEarthInfluence({ id, type: earthquakeType })
    .then((res) => {
      if (res.length > 0) {
        earthakeList.value = res
        currEarthake.value = res[0]
         loadXYC()
      }
      loading.value = false
    })
    .catch((err) => {
      earthakeList.value = []
      currEarthake.value = {}
      loading.value = false
    })
}
// 计算并生成产品
const createProdct = () => {
  loading.value = true
  earthquakeServerApi
    .rebuild({ version: currEarthake.value.version, earthQuakeId: id, type: earthquakeType })
    .then((res) => {
      message.success('计算并生成产品成功')
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
    })
}
const tabData = ref('')
// 按钮切换类型
const buttonType = ref('')
// 标题
const tableDatatitle = ref('')
// 表格数据
const tableData = ref([])
//地震详情
const earthquakeInfo = ref({
  title: '',
  earthquakeMagnitude: '',
  longitude: '',
  latitude: '',
  depth: '',
  earthquakeTime: '',
  id: '',
  divisionCode: ''
})
// 切换
const tabs = async (item, idx) => {
  activeTab.value = item
  if (idx + 1 == 2) {
    getListData()
  }
  if (idx + 1 == 3) {
    getassistantListData()
  }
  if (idx + 1 == 4) {
    getIdDataList()
  }

  tabs1.value = idx
  if (item == '在线地图') {
    // initMap(document.getElementById('map'), earthquakeInfo.value)
    getcurrentEarthInfluence()
  }
  if (item == '数据可视化') {
    router.push({
      path: '/gis/bigscree',
      query: {
        beforePath: router.currentRoute.value.path,
        data: JSON.stringify({ ...earthquakeInfo.value, version: currEarthake.value.version })
      }
    })
  }
  if (item == '专题图') {
    router.push({
      path: '/gis/gis2d',
      query: {
        beforePath: router.currentRoute.value.path,
        data: JSON.stringify({ ...earthquakeInfo.value, version: currEarthake.value.version })
      }
    })
  }
  if (item == '三维大屏') {
    router.push({
      path: '/gis/gis3d',
      query: {
        beforePath: router.currentRoute.value.path,
        data: JSON.stringify({ ...earthquakeInfo.value, version: currEarthake.value.version })
      }
    })
  }
}
// 震区概况
const getListData = async () => {
  let shockId = ''
  if (routeData.value.id !== undefined) {
    shockId = routeData.value.id
  } else {
    shockId = ''
  }
  let formdata = {
    tabData: earthquakeInfo.value.earthquakeType,
    id: shockId,
    divisionCode: routeData.value.divisionCode
  }
  try {
    const response = await earthquakeServerApi.getlistData(formdata)
    if (response) {
      namelistData.value = response
      extractaPictureDegreeText1(response.zone5)
      namelistData.value.createTime = routeData.value.createTime
      namelistData.value.earthquakeMagnitude = routeData.value.earthquakeMagnitude
      namelistData.value.longitude = routeData.value.longitude
      namelistData.value.latitude = routeData.value.latitude
      namelistData.value.depth = routeData.value.depth
      namelistData.value.longitudeDescribe = '东经' + routeData.value.longitude
      namelistData.value.latitudeDescribe = '北纬' + routeData.value.latitude
      namelistData.value.referenceLocation = routeData.value.referenceLocation
      if (routeData.value.earthquakeType == 1) {
        namelistData.value.earthquakeType = '正式地震'
      } else if (routeData.value.earthquakeType == 2) {
        namelistData.value.earthquakeType = '测试地震'
      } else if (routeData.value.earthquakeType == 3) {
        namelistData.value.earthquakeType = '演练地震'
      } else if (routeData.value.earthquakeType == 4) {
        namelistData.value.earthquakeType = '自动地震'
      } else {
        namelistData.value.earthquakeType = ''
      }
      namelistData.value.earthquakeTime = moment(routeData.value.earthquakeTime).format(
        'YYYY年MM月DD日'
      )
    }
    console.log(response, '123')
  } catch (error) {
    namelistData.value = {
      eqrthQuakeName: '',
      eqrthQuakeLongName: '',
      maxIntensity: '',
      maxDisasterArea: '',
      disasterScope: '',
      disasterScopeSize: '',
      zone5: '',
      debrisFlow: '',
      landslide: '',
      collapse: '',
      powerPlant: '',
      powerStation: '',
      airport: '',
      dangerous: '',
      shelter: '',
      hospital: '',
      school: '',
      historyStatistics: '',
      village: '',
      town: '',
      county: '',
      grade: '',
      gradeLevel: '',
      gradeDesc: '',
      trafficMapDesc: '',
      historicalDisasterMapDesc: '',
      historicalMapDesc: '',
      scopeMapDesc: '',
      villageCount1: '',
      villageCount2: '',
      countyPopGdpDesc: '',
      impactCount: '',
      impactArea: '',
      trafficLine: '',
      airportDistance: '',
      countyDistance: '',
      provinceDistance: '',
      centralDistance: '',
      centralDistance1: '',
      regionalDistance: '',
      quakeArea: '',
      resultData2: '',
      defense: '',
      quakeTown: '',
      townVillage: '',
      elevation: '',
      population: '',
      distance2: '',
      distance1: '',
      history: '',
      historyDesc: '',
      historyDisaster: '',
      resultData1: '',
      populationDensity: ''
    }
    console.error('请求后端API时发生错误:', error)
  }
}
// n度区，震区概况
const extractaPictureDegreeText1 = (assessment) => {
  if (assessment !== null) {
    allSchemas.value.degreeZone = []
    const lines = assessment.split('；')
    const degreeRegex = /(\d+)度区:/ // 匹配数字后跟“度区”
    lines.forEach((line, index) => {
      const match = line.match(degreeRegex) // 在每一行中查找度区
      if (match) {
        const degree = match[1] + '度区' // 提取度区编号
        const effectField = `effect${match[1]}` // 生成 effect 字段
        // 将度区信息存入 effectList
        allSchemas.value.degreeZone.unshift({ label: degree, field: effectField })
        namelistData.value[effectField] = line.replace(degreeRegex, '').trim()
      }
    })
  }
}

// 辅助决策
const getassistantListData = async () => {
  let version = currEarthake.value.version
  if (version !== undefined) {
    version = version
  } else {
    version = ''
  }
  let eqId = ''
  if (routeData.value.id !== undefined) {
    eqId = routeData.value.id
  } else {
    eqId = ''
  }
  let formdata = {
    tabData: earthquakeInfo.value.earthquakeType,
    id: eqId,
    divisionCode: routeData.value.divisionCode,
    version: version
  }
  try {
    const response = await earthquakeServerApi.getassistantListData(formdata)
    // 重点目标受影响情况评估
    extracttrafficDegreeText(response.targetAssessment)
    // 交通线路受影响情况评估
    extracttargetDegreeText(response.trafficAssessment)
    // 桥梁和隧道受影响情况评估
    extractkeynoteDegreeText(response.bridgeTunnelAssessment)
    assistantlistData.value = response
  } catch (error) {
    console.error('请求后端API时发生错误:', error)
  }
}
// 提取特定区域信息
const extracttrafficDegreeText = (assessment) => {
  if (assessment !== null) {
    assistantitem.value.effectList = []
    assistantlistDataitem.value = {}
    const lines = assessment.split('\n')
    const degreeRegex = /(\d+)度区/ // 匹配数字后跟“度区”

    lines.forEach((line, index) => {
      const match = line.match(degreeRegex) // 在每一行中查找度区
      if (match) {
        const degree = match[1] + '度区' // 提取度区编号
        const effectField = `effect${match[1]}` // 生成 effect 字段

        // 将度区信息存入 effectList
        assistantitem.value.effectList.push({ label: degree, field: effectField })

        // 假定 line 是对应的描述信息，存入 assistantlistData
        assistantlistDataitem.value[effectField] = line // 将当前行作为描述存入 assistantlistData
      }
    })
  }
}

const extracttargetDegreeText = (assessment) => {
  if (assessment !== null) {
    assistantitem.value.traffic = []
    trafficlistDataitem.value = {}
    const lines = assessment.split('\n')
    const degreeRegex = /(\d+)度区/ // 匹配数字后跟“度区”

    lines.forEach((line, index) => {
      const match = line.match(degreeRegex) // 在每一行中查找度区
      if (match) {
        const degree = match[1] + '度区' // 提取度区编号
        const effectField = `effect${match[1]}` // 生成 effect 字段

        // 将度区信息存入 effectList
        assistantitem.value.traffic.push({ label: degree, field: effectField })

        // 假定 line 是对应的描述信息，存入 assistantlistData
        trafficlistDataitem.value[effectField] = line // 将当前行作为描述存入 assistantlistData
      }
    })
  }
}
// 桥梁和隧道受影响评估
const extractkeynoteDegreeText = (assessment) => {
  if (assessment !== null) {
    assistantitem.value.bridge = []
    keynotelistDataitem.value = {}
    const lines = assessment.split('\n')
    const degreeRegex = /(\d+)度区/ // 匹配数字后跟“度区”

    lines.forEach((line, index) => {
      const match = line.match(degreeRegex) // 在每一行中查找度区
      if (match) {
        const degree = match[1] + '度区' // 提取度区编号
        const effectField = `effect${match[1]}` // 生成 effect 字段

        // 将度区信息存入 effectList
        assistantitem.value.bridge.push({ label: degree, field: effectField })

        // 假定 line 是对应的描述信息，存入 assistantlistData
        keynotelistDataitem.value[effectField] = line // 将当前行作为描述存入 assistantlistData
      }
    })
  }
}
// 类型高亮及列表切换
const handleButtonClick = (e) => {
  console.log(e)
  buttonList.value.forEach((button, idx) => {
    button.isActive = idx === e
  })
  if (e === 0) {
    buttonType.value = ''
    getIdDataList()
  }else if (e === 3){
    buttonType.value = '0,3,4'
    getIdDataList()
  }else{
    buttonType.value = e
    getIdDataList()
  }
}

// 获取地震标题
const getDataTitle = async () => {
  let id = route.query.id
  let earthquakeType = route.query.earthquakeType
  try {
    const response = await earthquakeServerApi.getEarthquakeById(id, earthquakeType)
    console.log(response)

    earthquakeInfo.value = {
      id: response.id,
      earthquakeId: response.earthquakeId,
      title: response.title,
      earthquakeMagnitude: response.earthquakeMagnitude,
      longitude: response.longitude,
      latitude: response.latitude,
      depth: response.depth,
      earthquakeTime: response.earthquakeTime,
      earthquakeType: earthquakeType,
      divisionCode: response.divisionCode
    }
    tableDatatitle.value = response.title
  } catch (error) {
    console.error('请求后端API时发生错误:', error)
  }
}
// 获取地震列表数据
const getIdDataList = async () => {
  let id = route.query.id
  let formdata = new FormData()
  formdata.append('earthquakeId', id)
  formdata.append('fileTypeId', '')
  formdata.append('mimeType', '')
  formdata.append('pageNo', currentPage.value)
  formdata.append('pageSize', pageSize.value)
  formdata.append('source', buttonType.value)
  formdata.append('divisionCode', earthquakeInfo.value.divisionCode)
  try {
    const fileList = await datarApi.getData(formdata)
    tableData.value = fileList.list.map((item) => {
      let typeImg = getTypeImg(item.mimeType)
      return {
        ...item,
        createdAt: moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
        imgType: typeImg
      }
    })
    total.value = fileList.total
  } catch (error) {
    console.log('失败123')
    tableData.value = []
    // 在这里处理异常
  }
}
// 删除项,批量下载
let idList = []
let filename = []
let filePathList = []
// 选取的行数据
const handleSelectionChange = (selection) => {
  idList = []
  filename = []
  filePathList = []
  selection.forEach((item) => {
    idList.push(item.id)
    filename.push(item.file)
    filePathList.push(item.filePath)
  })
}
// 批量下载
const downloadList = async () => {
  if (idList.length <= 0) {
    let id = route.query.id
    let formdata = new FormData()
    formdata.append('earthquakeId', id)
    formdata.append('fileTypeId', '')
    formdata.append('mimeType', '')
    formdata.append('pageNo', currentPage.value)
    formdata.append('pageSize', pageSize.value)
    formdata.append('source', buttonType.value)
    try {
      const response = await datarApi.getidList(formdata)
      idList = response
    } catch (error) {
      console.log(error)
      // 在这里处理异常
    }
  }
  ElMessageBox.alert('是否确定下载', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: async (action) => {
      if (action === 'confirm') {
        try {
          if (idList.length <= 0){
            ElMessage({
              type: 'info',
              message: '请选择要下载的文件！'
            })
            return
          }
          let format = new FormData()
          format.append('divisionCode', earthquakeInfo.value.divisionCode)
          format.append('ids', idList)
          const response = await datarApi.download(format)
          if (filename.length === 1) {
            let markFile = filename[0].split('.').pop()
            console.log('markFile：'+markFile)
            if (markFile == 'excel') {
              download.excel(response, filename[0])
            }
            if (markFile == 'word') {
              download.word(response, filename[0])
            }
            if (markFile == 'docx') {
              download.word(response, filename[0])
            }
            if (markFile == 'doc') {
              download.doc(response, filename[0])
            }
            if (markFile == 'zip') {
              download.zip(response, filename[0])
            }
            if (markFile == 'html') {
              download.html(response, filename[0])
            }
            if (markFile == 'pdf') {
              download.pdf(response, filename[0])
            }
            if (markFile == 'pptx') {
              download.ppt(response, filename[0])
            }
            if (markFile == 'ppt') {
              download.ppt(response, filename[0])
            }
            if (markFile == 'xml') {
              download.xml(response, filename[0])
            }
            if (markFile == 'markdown') {
              download.markdown(response, filename[0])
            }
            if (markFile == 'images') {
              download.images(response, filename[0])
            }
            if (markFile == 'png') {
              download.png(response, filename[0])
            }
            if (markFile == 'jpg') {
              download.jpg(response, filename[0])
            }
            if (markFile == 'smwu') {
              console.log('smuw下载');
              download.smuw(response, filename[0])
            }
          } else {
            // const currentTime = tableDatatitle.value
            // console.log(currentTime,'----');
            download.zip(response, `${tableDatatitle.value}.zip`)
          }
          ElMessage({
            type: 'success',
            message: '已下载！'
          })
        } catch (error) {
          console.log('下载失败')
          // 在这里处理异常
        }
      } else {
        ElMessage({
          type: 'info',
          message: '已取消下载！'
        })
      }
    }
  })
}

const productShow = () => {
  let basurl = import.meta.env.VITE_BASE_URL
  let arr = []
  imgList.value = []
  tableData.value.forEach((item, index) => {
    arr.push(item.filePath)
    let urlList = `${basurl}/admin-api/quake/file/read?pdfPath=${arr[index]}`
    imgList.value.push(urlList)
    if (imgList.value.length > 0) {
      centerDialogVisible.value = true
    }
  })
}

const downloadFile = (e) => {
  console.log(e, '--')
  idList = []
  filename = []
  idList.push(e.id)
  filename.push(e.file)
  ElMessageBox.alert('是否确定下载', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: async (action) => {
      if (action === 'confirm') {
        try {
          let format = new FormData()
          format.append('divisionCode', earthquakeInfo.value.divisionCode)
          format.append('ids', idList)
          const response = await datarApi.download(format)

          if (filename.length === 1) {
            let markFile = e.mimeType
            console.log(markFile)
            if (markFile == 'excel') {
              download.excel(response, filename[0])
            }
            if (markFile == 'word') {
              download.word(response, filename[0])
            }
            if (markFile == 'zip') {
              download.zip(response, filename[0])
            }
            if (markFile == 'html') {
              download.html(response, filename[0])
            }
            if (markFile == 'pdf') {
              download.pdf(response, filename[0])
            }
            if (markFile == 'xml') {
              download.xml(response, filename[0])
            }
            if (markFile == 'markdown') {
              download.markdown(response, filename[0])
            }
            if (markFile == 'images') {
              download.images(response, filename[0])
            }
            if (markFile == 'docx') {
              download.word(response, filename[0])
            }
            if (markFile == 'jpg') {
              download.images(response, filename[0])
            }
            if (markFile == 'png') {
              download.images(response, filename[0])
            }
            if (markFile == 'pptx') {
              download.ppt(response, filename[0])
            }
            if (markFile == 'ppt') {
              download.ppt(response, filename[0])
            }
            if (markFile == 'doc') {
              download.doc(response, filename[0])
            }
            if (markFile == 'smwu') {
              console.log('smuw下载');
              download.smuw(response, filename[0])
            }
          } else {
            const currentTime = moment().format('YYYY-MM-DD HH:mm')
            download.zip(response, currentTime)
          }
          ElMessage({
            type: 'success',
            message: '已下载！'
          })
        } catch (error) {
          console.log('失败')
          // 在这里处理异常
        }
      } else {
        ElMessage({
          type: 'info',
          message: '已取消下载！'
        })
      }
    }
  })
}
// 预览
const Preview = (row) => {
  let previewUrl = row.filePath
  let basurl = import.meta.env.VITE_BASE_URL
  let urlList = `${basurl}/admin-api/quake/file/read?pdfPath=${previewUrl}`
  window.open(urlList)
}
// 分页切换
const handleSizeChange = (e) => {
  pageSize.value = e
  getIdDataList()
}

const handleCurrentChange = (e) => {
  currentPage.value = e
  getIdDataList()
}

//地图
const mapElement = ref()
let viewpageMap = null
const initGisMap = () => {
  viewpageMap = initMap(mapElement.value, earthquakeInfo.value, currEarthake.value.version)
}

let supermaplayer = null;
const loadXYC = () => {
 supermaplayer && viewpageMap.removeLayer(supermaplayer)
 supermaplayer = addYXCLayer(earthquakeInfo.value.id,currEarthake.value.version,viewpageMap)
 // loadEarthQuakeYXC(earthquakeInfo.value.id, 'xyc', viewpageMap, currEarthake.value.version)
}
//返回
const backBut = () => {
  router.go(-1)
}

watch(
  () => activeTab.value,
  (newval) => {
    if (newval === '在线地图') {
      setTimeout(() => {
        initGisMap()
      }, 0)
    }
  }
)

const getRouteData = () => {
  console.log(route.query, '====')
  routeData.value = route.query
  const titleArr = [
      '在线地图',
      '震区概况',
      '辅助决策',
      '地震文件',
      '数据可视化',
      '专题图',
      '三维大屏',
      '应急服务信息'
    ],
    titleArrt = [
      '在线地图',
      '震区概况',
      '辅助决策',
      '地震文件',
      '专题图',
      '三维大屏',
      '应急服务信息'
    ],
    earthquakeType = route.query.earthquakeType
  listTitle.value = earthquakeType == '1' ? titleArr : titleArrt
}

onMounted(async () => {
  getRouteData()
  await getDataTitle()
  initGisMap()
  await getcurrentEarthInfluence()
  //初始化地图

  await getIdDataList()
  // namelistData.value = []
})
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
}

.earthquakeServer-viewpage {
  padding: 20px;
  background-color: #f0f2f5;
}

.liList {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

.tabsStyle {
  background: rgba(53, 96, 246, 0.1);
  color: #3560f6;
}

:deep(.el-input-number) {
  .el-input__inner {
    text-align: left;
  }
}

/* 取消鼠标悬停时的边框效果 */
:deep(.el-dropdown-menu) {
  .el-dropdown-menu__item:hover {
    border: none !important;
    background-color: transparent !important;
    /* 可选：取消背景色变化 */
  }
}

:deep(.el-descriptions__header) {
  margin-bottom: 0 !important;
}

:deep(.el-descriptions__title) {
  flex: 1 !important;
}

:deep(.el-descriptions__cell) {
  padding: 0 11px !important;
}

:deep(.is-bordered-label) {
  width: 30% !important;
  background: transparent !important;
  font-weight: 400 !important;
  color: #333333 !important;
}

:deep(.is-bordered-content) {
  width: 70% !important;
}

.titleBox {
  font-family: PingFangSC;
  font-weight: normal;
  text-align: center;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' auto;
  color: #333333;
  width: 100%;
  height: 40px;
  background-color: #eaeffe;
  font-size: 16px;
  line-height: 40px;
}

.titleBox div {
  border: 1px solid #b0b0b0;
}

.destitle {
  font-family: PingFangSC;
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' auto;
}

.cell-item {
  font-family: PingFangSC;
  font-size: 14px;
  color: #333;
  transition: background-color 0.3s;
  // margin: 20px 6px 20px 6px;
}

// .cell-item:hover {
//   background-color: #f5f5f5;
//   /* 鼠标移入时的背景颜色 */
// }

.cell-item2 {
  font-size: 14px;
  color: #666666;
  transition: background-color 0.3s;
  // margin-left: 20px;
  padding: 6px 20px;
}

.cell-item2:hover {
  background-color: #f5f5f5;
  /* 鼠标移入时的背景颜色 */
}

:deep(.custom-header) {
  background-color: #f2f3f5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}

.custom-table-container {
  width: 100%;
  /* 根据需要调整容器宽度 */
  margin: 0 auto;
  /* 居中容器（可选） */
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  /* 合并表格边框 */
}

.custom-table td {
  border: 1px solid #E5E6EB;
  /* 添加边框（可选） */
  padding: 8px;
  /* 添加内边距（可选） */
}

.center-cell {
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  color: #333;
  /* 居中文本 */
  vertical-align: middle;
  background-color: #eaeffe;
  /* 垂直居中（可能需要额外的CSS来处理高度问题） */
}

.col-30 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  width: 20%;
  text-align: center;
  /* 设置列宽为30% */
}

.col-70 {
  width: 80%;
  /* 设置列宽为70% */
}

.col-70:hover {
  background-color: #f5f5f5;
  /* 鼠标移入时的背景颜色 */
}
</style>
